<template>
  <div style="margin-top: 5px;">
    <titleBox text="支部概况" @click="show = !show"></titleBox>

    <div class="content"
      :style="{ height: show ? height + 'px' : '0px', transition: 'height 0.5s ease-in-out', overflow: 'hidden' }">
      <div ref="content" style="padding:10px;border: 1px solid #11afc180;">
        <div v-if="data.length > 0">
          <div style="display:flex; align-items:center;justify-content: space-between;">
            <div style="color: #D5F2FF;">{{ data[index].name }}</div>
            <div style="display: flex; align-items:center;">
              <diV class="btn" @click="pre">上一个</diV>
              <diV class="btn" @click="next">下一个</diV>
            </div>
          </div>
          <div v-for="(item, i) in data" :key="i" class="slide-in-left">
            <div v-if="item.id === nowKey">
              <div style="display:flex; align-items:center; margin-top:5px;">
                <div style="font-size: 12px;flex:1; color:#FFFFFF99;display:flex; align-items:center; "> <img
                    style="width: 8px; height:12px; margin-right:5px;" src="/img/myimg/lefticon2.png" /> 网格长 <span
                    style="font-size: 12px; margin-left: 10px;color:#ffffff;">{{ item.organization.name }}</span></div>
                <div style="font-size: 12px;flex:1; color:#FFFFFF99;display:flex; align-items:center; "> <img
                    style="width: 8px; height:12px; margin-right:5px;" src="/img/myimg/lefticon2.png" />网格员 <span
                    style="font-size: 12px; margin-left: 10px;color:#ffffff;">{{ item.num }}</span></div>
              </div>
              <div style="font-size: 12px; margin-top:5px; color:#FFFFFFE5;">
                {{ item.jianjie }}
              </div>
            </div>
          </div>
        </div>
        <!-- <div v-if="data.length === 0" style="font-size: 12px; color:#999999; text-align: center; padding:20px 0;">
          暂无数据
        </div> -->
      </div>
    </div>
  </div>
</template>
<script setup>
import $api from "@/utils/request.js"
import { ref, computed, onMounted, onUnmounted, nextTick } from "vue"
import titleBox from "../mConponents/titleBox.vue"
const nowKey = ref("")
const index = computed(() => {
  return data.value.findIndex(e => e.id === nowKey.value)
})
const timer = ref(null)
const content = ref(null)
const height = ref(0)
const show = ref(false)
const getData = async () => {
  const res = await $api.get("/api/V1/getGridoverview")
  if (res.code === 1) {
    console.log(res.data)
    if (res.data.length > 0) {
      nowKey.value = res.data[0].id
      data.value = res.data
      startNext()

    }
    nextTick(() => {
      height.value = content.value.offsetHeight
      // show.value = true
    })


  }
}
onMounted(() => {
  getData()
})
onUnmounted(() => {
  clearInterval(timer.value)
  startNext()
})

const startNext = () => {
  nextTick(() => {
    if (!content.value) { return }
    height.value = content.value.offsetHeight
  })
  timer.value = setInterval(function () {
    next()
  }, 5000)
}

const pre = () => {
  if (index.value === 0) {
    nowKey.value = data.value[data.value.length - 1].id
  } else {
    nowKey.value = data.value[index.value - 1].id
  }
  clearInterval(timer.value)
  startNext()
}
const next = () => {
  if (index.value === data.value.length - 1) {
    nowKey.value = data.value[0].id
  } else {
    nowKey.value = data.value[index.value + 1].id

  }
  clearInterval(timer.value)
  startNext()
}
const data = ref([])

defineExpose({ pre, next })
</script>
<style scoped lang="less">
.slide-in-left {
  animation: slideInFromLeft 0.5s ease-out;
}

@keyframes slideInFromLeft {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}


.btn {
  background: linear-gradient(180deg, rgba(0, 36, 42, 0.5) 0%, rgba(0, 67, 78, 0.5) 100%);
  border: 1px solid #57FFFF;
  border-radius: 99px;
  border-width: 1px;
  padding-top: 2px;
  padding-right: 10px;
  padding-bottom: 2px;
  padding-left: 10px;
  font-size: 9px;
  margin-left: 10px;
  color: #FFFFFFE5;
  cursor: pointer;

}

.content {
  background-color: #001a1dcc;
  width: 340px;
  margin-top: 5px;

  // display: flex;
  // align-items: center;
  // justify-content: space-between;
  .item {
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;

    .icon {
      width: 50px;
      height: 50px;
      background-size: 50px 50px;
    }

    .name {
      color: rgba(193, 244, 255, 1);
      font-family: PingFang SC;
      font-weight: 600;
      font-size: 11px;
      line-height: 19.6px;
      letter-spacing: 0%;

    }

    .type {

      font-family: PingFang SC;
      font-weight: 400;
      font-size: 9px;
      letter-spacing: 0%;
      color: rgba(255, 255, 255, 1);
      border-radius: 10px;
      margin-top: 5px;

    }
  }
}
</style>
